<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>远程唤醒</title>
</head>
<body>
<h1>WOL远程唤醒</h1>
<style type="text/css">
    table {
        width: 90%;
        margin: 5px auto;
    }

    th, td {
        height: 25px;
        line-height: 25px;
        text-align: center;
        border: 1px solid #ccc;
    }

    tr:hover {
        background: #6f599c;
    }

    input{
        background: transparent;
        border: none;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: medium;
    }

    .result-row {
        display: none;
    }

    .success {
        color: green;
    }

    .error {
        color: red;
    }

</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 为所有表单添加事件监听器
    const forms = document.querySelectorAll('form[id^="wol"]');
    
    forms.forEach(function(form, index) {
        const resultRow = document.getElementById('resultRow' + (index + 1));
        const resultCell = document.getElementById('result' + (index + 1));
        
        form.addEventListener('submit', function(e) {
            e.preventDefault(); // 阻止表单默认提交行为
            
            // 获取表单数据
            const formData = new FormData(form);
            
            // 显示加载状态
            resultCell.textContent = '正在发送唤醒包...';
            resultCell.className = '';
            resultRow.style.display = 'table-row';
            
            // 发送 AJAX 请求
            fetch('wol.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                // 显示返回的结果
                if (data.success) {
                    resultCell.textContent = data.message;
                    resultCell.className = 'success';
                } else {
                    resultCell.textContent = '错误: ' + data.message;
                    resultCell.className = 'error';
                }
            })
            .catch(error => {
                // 显示错误信息
                resultCell.textContent = '发送失败: ' + error.message;
                resultCell.className = 'error';
            });
        });
    });
});
</script>
<table border="1">
    <tr>
        <th>唤醒列表</th>
        <th>MAC</th>
        <th>操作</th>
    </tr>
    <tr>
        <form id="wol1">
            <td><input type="text" name="name" value="holin" autocomplete="off" /></td>
            <td><input type="text" name="mac" value="D8:BB:C1:9E:80:3B" autocomplete="off"/></td>
            <td><input type="submit" value="开 机"/></td>
        </form>
    </tr>
    <tr id="resultRow1" class="result-row"><td colspan="3" id="result1"></td></tr>
    
    <tr>
        <form id="wol2">
            <td><input type="text" name="name" value="server" autocomplete="off" /></td>
            <td><input type="text" name="mac" value="00:11:22:33:44:55" autocomplete="off"/></td>
            <td><input type="submit" value="开 机"/></td>
        </form>
    </tr>
    <tr id="resultRow2" class="result-row"><td colspan="3" id="result2"></td></tr>
    
    <tr>
        <form id="wol3">
            <td><input type="text" name="name" value="workstation" autocomplete="off" /></td>
            <td><input type="text" name="mac" value="AA:BB:CC:DD:EE:FF" autocomplete="off"/></td>
            <td><input type="submit" value="开 机"/></td>
        </form>
    </tr>
    <tr id="resultRow3" class="result-row"><td colspan="3" id="result3"></td></tr>
</table>
</body>
</body>
</html>